<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="routingInfo" :inline="true" label-width="92px">
        <el-form-item label="工艺路线编号">
          <el-input
            v-model="routingInfo.routingCode"
            placeholder="请输入工艺路线编号"
            clearable
            disabled
            @keyup.enter="search"
          />
        </el-form-item>

        <el-form-item label="工艺路线名称">
          <el-input
            v-model="routingInfo.routingName"
            placeholder="请输入工艺路线名称"
            clearable
            disabled
            @keyup.enter="search"
          />
        </el-form-item>
        <el-form-item label="版本编号">
          <el-input
            v-model="routingInfo.versionNo"
            placeholder="请输入版本编号"
            clearable
            disabled
            @keyup.enter="search"
          />
        </el-form-item>
        <el-form-item label="工艺路线分组">
          <el-select
            v-model="routingInfo.routingGroupId"
            clearable
            disabled
            placeholder="请选择工艺路线分组"
            filterable
          >
            <el-option
              v-for="item in routeGroups"
              :key="item.id"
              :label="item.routingGroupName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="success" plain @click="jumpUrl()">
          <i-ep-plus />
          新增
        </el-button>
      </template>
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
      >
        <el-table-column
          label="生产序号"
          prop="workSequence"
          min-width="110"
          show-overflow-tooltip
          align="center"
          fixed
        />

        <el-table-column
          label="工作中心"
          prop="workCenterCode"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span v-show="scope.row.workCenterCode">
              {{ `${scope.row.workCenterCode}-${scope.row.workCenterName}` }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="工序编号"
          prop="processCode"
          min-width="100"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="工序名称"
          prop="processName"
          min-width="150"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="工序类别"
          prop="processType"
          min-width="110"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ useDictionary("ProcessType", scope.row.processType ?? "") }}
          </template>
        </el-table-column>
        <el-table-column
          label="生产节拍(秒)"
          prop="tactTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="基础加工数量"
          prop="baseQuantity"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="单位"
          prop="baseQuantityUnit"
          min-width="110"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="加工人数"
          prop="workerQuantity"
          min-width="110"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="关键工序"
          prop="keyProcess"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag v-show="scope.row.keyProcess === 1" type="success"
              >是</el-tag
            >
            <el-tag v-show="scope.row.keyProcess !== 1" type="info">否</el-tag>
            <!-- {{ useDictionary("YesNo", scope.row.keyProcess ?? "") }} -->
          </template>
        </el-table-column>
        <el-table-column
          label="主工序"
          prop="primaryProcess"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag v-show="scope.row.primaryProcess === 1" type="success"
              >是</el-tag
            >
            <el-tag v-show="scope.row.primaryProcess !== 1" type="info"
              >否</el-tag
            >
            <!-- {{ useDictionary("YesNo", scope.row.primaryProcess ?? "") }} -->
          </template>
        </el-table-column>
        <el-table-column
          label="机器工时(秒)"
          prop="machineTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />

        <el-table-column
          label="劳动工时(秒)"
          prop="laborTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="移入工时(秒)"
          prop="inboundTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="移出工时(秒)"
          prop="outboundTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="准备工时(秒)"
          prop="prepareTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="等待工时(秒)"
          prop="waitTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="换型时间(秒)"
          prop="transferTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="总工时(秒)"
          prop="totalTime"
          min-width="110"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="合计成本"
          prop="totalCost"
          min-width="100"
          align="right"
          show-overflow-tooltip
        />
        <el-table-column
          label="委外供应商"
          prop="supplierCode"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{
              scope.row.supplierId
                ? `${scope.row.supplierCode}-${scope.row.supplierName}`
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="自动进入下一位置"
          prop="transferToNext"
          align="center"
          min-width="140"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag v-show="scope.row.transferToNext === 1" type="success"
              >是</el-tag
            >
            <el-tag v-show="scope.row.transferToNext !== 1" type="info"
              >否</el-tag
            >
            <!-- {{ useDictionary("YesNo", scope.row.transferToNext) ==='是'?`<el-tag
              type="success"
              >是</el-tag
            >`:`<el-tag>否</el-tag>` }} -->
          </template>
        </el-table-column>
        <el-table-column
          label="是否报工"
          prop="report"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag v-show="scope.row.report === 1" type="success">是</el-tag>
            <el-tag v-show="scope.row.report !== 1" type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              link
              @click="jumpUrl(scope.row.id, 1)"
            >
              查看
            </el-button>
            <el-button
              type="primary"
              size="small"
              link
              @click="jumpUrl(scope.row.id, '')"
            >
              编辑
            </el-button>
            <!-- <el-button
              type="success"
              size="small"
              link
              @click="upMove(scope.row)"
            >
              上移
            </el-button>
            <el-button
              type="success"
              size="small"
              link
              @click="downMove(scope.row)"
            >
              下移
            </el-button> -->
            <el-button
              type="danger"
              size="small"
              link
              @click="deleteData(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :background="true"
        :current-page="pageable.pageNum"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-[20px]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<!-- 手动挂载左侧菜单高亮 -->
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    to.meta.defaultActive = "/mes/mesRouting/list";
    next();
  },
});
</script>

<script setup lang="ts">
import { useTable, useDictionary } from "@/utils/useTable";
import { getMesRouteGroupList } from "@/utils/commonData";
import request from "@/utils/request";
import { useRoute } from "vue-router";
import router from "@/router";
const route = useRoute();

defineOptions({
  name: "MESMESROUTINGPROGRESS",
  inheritAttrs: false,
});

// 请求参数
const requestApi = "/mes/mesroutingprocess/queryByPage";

// 是否需要分页
const pagination = true;

const initParam = {};

// 初始化搜索参数数据
const searchParamInit = {
  routingId: route.query.id,
};

function jumpUrl(id?: "", isReadonly?: any) {
  router.push({
    path: "/mes/mesRouting/addProgress",
    query: {
      id,
      isReadonly,
      routingId: route.query.id,
      routingCode: routingInfo.routingCode,
      plantId: routingInfo.plantId,
      timestamp: new Date().getTime(),
    },
  });
}

const routingInfo = reactive({
  routingCode: "",
  routingName: "",
  routingGroupId: "",
  versionNo: "",
  plantId: "",
});

const deleteParam = {
  api: "/mes/mesroutingprocess/delete",
  data: {},
};

// 数据请求错误后处理
function requestError() {}
const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  ids,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleTableDelete,
  loading,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  requestError,
  deleteParam
);

// 查询详情
async function getRoutingInfo(id: string) {
  const { data } = await request({
    url: `/mes/mesrouting/get/${id}`,
    method: "get",
  });
  (routingInfo.routingCode = data.routingCode || ""),
    (routingInfo.routingName = data.routingName || ""),
    (routingInfo.routingGroupId = data.routingGroupId || ""),
    (routingInfo.versionNo = data.versionNo || "");
  routingInfo.plantId = data.plantId || "";
}

// 工艺路线分组
const routeGroups: any = ref([]);

onActivated(async () => {
  getRoutingInfo(route.query.id);
  getTableList();
  // plantList.value = (await getPlantList()) || [];
  routeGroups.value = (await getMesRouteGroupList()) || [];
});

// 下移
async function downMove(row: any) {
  const { data } = await request({
    url: `/mes/mesroutingprocess/moveDown`,
    method: "post",
    data: {
      id: row.id,
    },
  });
  ElMessage.success("下移成功");
  search();
}
// 上移
async function upMove(row: any) {
  const { data } = await request({
    url: `/mes/mesroutingprocess/moveUp`,
    method: "post",
    data: {
      id: row.id,
    },
  });
  ElMessage.success("上移成功");
  search();
}
// 删除/mesrouting/delete
const deleteData = async (id: string) => {
  ElMessageBox.confirm("确定删除该条生产线么吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res: any = await request({
        url: "/mes/mesroutingprocess/delete",
        method: "post",
        data: { id },
      });
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getTableList();
      }
    })
    .catch(() => {});
};
</script>
<style lang="scss" scoped>
:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #fff !important;
  box-shadow: none !important;
  border-radius: 0;
  border-bottom: 1px solid #e4e7ed;
  padding-left: 4px;
}
:deep(.el-input.is-disabled .el-input__inner) {
  color: #606266;
  -webkit-text-fill-color: #606266;
}
</style>
